<template>
  <div class="Product_details">
    <div class="header">
      <van-nav-bar title="商品详情" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    </div>
      <div class="fd_slide fd_slide1">
        <van-swipe :autoplay="3000" indicator-color="white" v-if="ShopPingData.productImages">
          <van-swipe-item v-for="(item,index) in ShopPingData.productImages" :key="index">
            <img :src="item.imageUrl" alt="">
          </van-swipe-item>
        </van-swipe>
        <img :src="ShopPingData.image_url" v-else/>
      </div>
      <div class="bg_onws " v-for="(i,index) in ShopPingData.repository" v-if="index==0" :key="index">
        <div class="sp_detone">
          <p class="sp_text">{{i.product_name}}</p>
          <p class="sp_text_one">
						<span class="gy_price_mark">￥</span><span class="gy_price_num">{{i.price}}</span>
					</p>
          <ul class="sp_ul">
            <li>库存：<span>{{i.count}} </span></li>
            <li>已售：<span>{{ShopPingData.sales_volume}}</span></li>
          </ul>
        </div>
        <div class="sp_dettwo" @click="evaluation(ShopPingData)">
            <div class="spde_side">已有评论{{ShopPingData.comment_num}}条</div>
            <div class="spde_cont">
              <img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/pl.png">
            </div>
        </div>
      </div>
    <div class="bg_onw">
      <div class="sp_dettree">
        <div class="spd">
          <div class="spd_side">温馨提示</div>
          <div class="spd_fonts">为了您的权益，下单前请联系客服咨询，以电话协商为准</div>
        </div>
        <div class="spd_one" >
          <div class="spd_font">
            <div class="clearfix">
              <p class="ke_ph">客服电话&nbsp;&nbsp;&nbsp;&nbsp;{{ShopPingData.customer_service_phone}}</p>
                <div class="os">
                  <a :href="'tel:' + ShopPingData.customer_service_phone"><img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/ph.png" class="sl_bd" >&nbsp;拨打</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="sp_detfour">
        <div class="spdd_one">
          <ul>
           <!-- <li>
              <div class="spdd_side">商品地址</div><div class="spdd_cont"><span>{{ShopPingData.shop.address}}</span></div></li> -->
            <li>
              <div class="spdd_side">发货时间</div>
              <div class="spdd_cont"><span>第七天内发货（从下单当日起）</span></div>
            </li>
              <li>
              <div class="spdd_side">规格/型号</div>
              <div class="spdd_cont"><span v-for="(i,index) in ShopPingData.repository">{{i.product_detail_group_name}}</span></div>
          </li>
          </ul>
        </div>
      </div>
      <div style="overflow: scroll;">

        <div class="sp_detfive" v-show="showlaoding">
          <div class="spd_tit center">产品属性</div>
          <div class="spd_content" v-html="ShopPingData.detail">
          </div>
        </div>

      </div>

    </div>
<!--foot-->
    <div class="foot_detail">
      <div class="foot_sides">
        <ul>
          <li>
            <p class="sd_img" v-if="ShopPingData" >
            <img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/dp.png" class="sc_pne" @click="ShopLink(ShopPingData)"/>
          </p>
            <p>店铺</p>
          </li>
         <!-- <li @click="liao()"><p class="sd_img"><img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/kf.png" class="sc_pne"/>
          </p>
            <p>聊生意</p></li> -->
          <li>
            <div class="sd_img sdp_img " @click="test()" id="imgUrl">
             <div id="sc_pne" class="sc_pne1" v-if="isA"></div>
              <div class="sc_pne2" v-else></div> 
          </div>
            <p>收藏</p>
          </li>
        </ul>
      </div>
      <div class="foot_cont" @click="cart()">
       立即购买
      </div>
    </div>
    <!--弹出框-->
<van-action-sheet v-model="botton_show">
	<div class="shop_car_detail" >
	    <div class="shop_car">
	      <div class="dle" @click="dle()">
	        <img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/close.png"/>
	      </div>
	                <div class="shop_car_div" v-for="(i,index) in ShopPingData.repository" v-if="index==0">
	                 <div class="shop_car-img"><img :src="ShopPingData.image_url"/><p></p></div>
	                    <div class="shop_car_detail_data_buttom">
						<div class="shop_car_detail_data_buttom_p">{{ShopPingData.name}}</div>
						<div><span class="gy_price_mark">￥</span><span class="gy_price_num">{{price}}</span></div>
	                         	<div class="shop_car_detail_data_buttom_count">库存 :{{i.count}}</div>
	                    </div>
				  </div>
				 <div class="shop_car_content">规格/型号
				   <div class="attr">
					 <ul>
					   <li v-for="(i,ind) in ShopPingData.repository"
						   @click="checkRamEvent(i,ind)">
						 <input type="text" :value="i.product_detail_group_name" readonly="readonly" :class="{active1: ind === ramIndex}">
					   </li>
					 </ul>
				   </div>
				 </div>
	               <div class="number_element1">
	                        <div class="num">购买数量</div>
					<div class="number_element1_right" >
						<div @click="delete_number()" class="add_del_botton">-</div>
	                        <input type="text" name="input1" :value="ShopPingData.buymin" readonly="true">
	                        <div @click="add_number()" class="add_del_botton">+</div>
					</div>
	              </div>
				<div class="ch_sh_four" @click="tiaozhuan(ShopPingData)">
					<button>确定</button>
				</div>
	            </div>
	        </div> 
</van-action-sheet>
		<!-- <div v-show="botton_show" class="botton_show">
			
		     <div class="shop_car_detail" >
	    <div class="shop_car">
	      <div class="dle" @click="dle()">
	        <img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/close.png"/>
	      </div>
	                <div class="shop_car_div" v-for="(i,index) in ShopPingData.repository" v-if="index==0">
	                 <div class="shop_car-img"><img :src="ShopPingData.image_url"/><p></p></div>
	                    <div class="shop_car_detail_data_buttom">
						<div class="shop_car_detail_data_buttom_p">{{ShopPingData.name}}</div>
						<div><span>￥{{price}}</span></div>
	                         	<div class="shop_car_detail_data_buttom_count">库存 :{{i.count}}</div>
	                    </div>
				  </div>
				 <div class="shop_car_content">规格/型号
				   <div class="attr">
					 <ul>
					   <li v-for="(i,ind) in ShopPingData.repository"
						   @click="checkRamEvent(i,ind)">
						 <input type="text" :value="i.product_detail_group_name" readonly="readonly" :class="{active1: ind === ramIndex}">
					   </li>
					 </ul>
				   </div>
				 </div>
	               <div class="number_element1">
	                        <div class="num">购买数量</div>
					<div class="number_element1_right" >
						<div @click="delete_number()" class="add_del_botton">-</div>
	                        <input type="text" name="input1" :value="ShopPingData.buymin" readonly="true">
	                        <div @click="add_number()" class="add_del_botton">+</div>
					</div>
	              </div>
				<div class="ch_sh_four" @click="tiaozhuan(ShopPingData)">
					<button>确定</button>
				</div>
	            </div>
	        </div>
		
		</div> -->
    
    <!--回到顶部-->
    <goTop></goTop>
  </div>
</template>
<script>
  import { Loadmore } from 'mint-ui'
  import sha1 from 'js-sha1'
  import goTop from '@/pages/foot/goTop'
  export default{
     // props: ['ShopPingData'],
    data(){
      return {
        show_img: false,
        img_show: true,
        //购物车
        botton_show:false,
        ShopPingData:[],
        total_price: 0,
        popInfo: {},
        isA: false,
        ramIndex:10,
        price:0,
        product_detail_group_name:'',
        id:'',
        showlaoding:true,
        allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
        scrollMode:"touch", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
        wrapperHeight: 0,
        courrentPage: 0,
        type:2,           //类型 1:为农贸商品，2为匀贸商品
        url:window.location.href,
      }
    },

    created:function () {
      setTitle('商品详情')
      console.log(this.url)
      localStorage.setItem('urlId', this.$route.query.id);
      localStorage.setItem('urlType', this.$route.query.type);
      localStorage.setItem('urlUser_id', this.$route.query.user_id);
      localStorage.setItem('urlFrom', this.$route.query.from);
      localStorage.setItem('urlIsappinstalled', this.$route.query.isappinstalled);
    },
    mounted(){
      this.getCommodity();
      this.wxRegCallback();
     },
    components: {
      'v-loadmore':Loadmore,goTop
    },
    methods: {
      evaluation(ShopPingData){
        this.$router.push({path: '/Commodity_evaluations', query:{id:ShopPingData.id}})
      },
      checkRamEvent (i,num) {
        this.ramIndex = num;
        console.log("00001",this.ramIndex )
          if (i.id && i.product_detail_group_name) {
            this.price = i.price;
            this.product_detail_group_name=i.product_detail_group_name
            this.id=i.id
            console.log("0000", this.price,this.id)
          return this.price
        }
      },
      liao(){
        this.$toast("暂未开放此功能");
      },
      //返回
      onClickLeft() {
        this.$router.go(-1);
      },
      //点击收藏
      async test() {
        let Id= this.$route.query.id;
        var list=JSON.parse(localStorage.getItem('userInfo')|| '[]')
        this.list=list
        var userId=list.userId
        var token = this.$cookies.get("token")||localStorage.getItem('token');
        if (!userId) {
          localStorage.setItem('beforeLoginUrl',"ProductDetails?id="+this.$base.getQueryString("Id"));
          this.$router.push({path:'/login'})
        }else {
          let params = {
            product_id: Id,
          };
          const res = await this.$axios.post(this.$api.collectProductData, params);
          console.log(res)
            if (res.isfiag == 1) {//数据库中没有收藏,点击收藏操作
              let params = {
                product_id: Id,
                user_id:userId
              };
              const res = await this.$axios.post(this.$api.collectProductData, params);
                res.isfiag = 1
               this.$toast(res.msg);
			    console.log('00')
            } else {//数据库存在收藏,点击删除收藏操作
              let params = {
                product_id: Id,
                user_id:userId
              };
              const res = await this.$axios.post(this.$api.collectProductData, params);
                res.isfiag = 0
              this.$toast(res.msg);
            }
			 console.log('11')
            this.isA = !this.isA
          }
      },

      //获取商品详情
      async getCommodity() {
        let Id= this.$route.query.id;
        if(this.$route.query.type!=null){
            this.type=this.$route.query.type;
        }else{
            this.type=2;
        }
        var list=JSON.parse(localStorage.getItem('userInfo')|| '[]')
        this.list=list
        var userId=list.userId
        var token = localStorage.getItem('token');
        if (!userId) {
          let params = {
            goods_id:Id
          };
          const res = await this.$axios.post(this.$api.goodsDetailedData, params);
          if (res.success) {
            this.ShopPingData = res.data;
              console.log(eval(this.ShopPingData.repository[0].attr_value_items_format));
          } else {
            this.$toast(res.msg);
          }
        }else {
          let params = {
            goods_id:Id,
            user_id:userId
          };
          const res = await this.$axios.post(this.$api.goodsDetailedData, params);

          if (res.success) {
            this.ShopPingData = res.data;
            console.log(this.ShopPingData.attr_value_items_format);
            if(this.ShopPingData.collection){
              this.isA=true
            }
          } else {
            this.$toast(res.msg);
          }
        }
      },
      //显示模态框
      cart:function () {
          this.botton_show = !this.botton_show;
        var token = this.$cookies.get("token")||localStorage.getItem('token');
        var user_id=this.$route.query.user_id;
        var urlFrom=this.$route.query.from;
        var urlIsappinstalled=this.$route.query.isappinstalled;
        console.log(token);
        if(token==null){
          //跳转登陆页面 用户登录后获取
          localStorage.setItem('beforeLoginUrl',"ProductDetails?id="+this.$route.query.id+"&type="+this.type+"&user_id="+user_id+"&from="+urlFrom+"&isappinstalled="+urlIsappinstalled);
          this.$router.push({path:'/login'})
          return;
        }
        },
      //点击数量增加
      add_number() {
        if(this.ShopPingData.buymin==this.ShopPingData.restrict_count){
          return
        }else {
          this.ShopPingData.buymin = this.ShopPingData.buymin + 1
        }
      },
      delete_number() {
        //最小值为1所以当为1的时候就跳出判断语句
        if(this.ShopPingData.buymin == 1) {
          return;
        } else {
          this.ShopPingData.buymin = this.ShopPingData.buymin - 1
        }
      },
      //跳转下单
      tiaozhuan(ShopPingData) {
        if(this.price==0){
          this.$toast("请选择规格/型号");
        }else {
          this.$router.push({name: '购物车', query: {
						shop_id:ShopPingData.shop.id,
						Titlename:ShopPingData.shop.name,
            id:ShopPingData.id,
						buymin:ShopPingData.buymin,
						product_name:this.product_detail_group_name,
						price:this.price,
            shop_name:ShopPingData.name,
						img:ShopPingData.image_url,
						repository_id:this.id,
						restrict_count:ShopPingData.restrict_count,
						type:this.type
            }})
        }
      },
      //关闭模态框
      dle() {
        this.botton_show =false;
      },
      //跳转店铺
      ShopLink(ShopPingData){
        this.$router.push({path: '/Shop', query:{name:ShopPingData.shop.name,shop_id:ShopPingData.shop.id}})
      },

      wxRegCallback () {
        var that=this;
        var json_data=that.$axios.get(that.$api.weixinUrl);
        var fx_noncestr=that.$base.randomString(32);
        var fx_tampstr=that.$base.createTimestamp();

        json_data.then(function(result){
          var signStr = "jsapi_ticket=" + result.data + "&noncestr=" + fx_noncestr + "&timestamp=" + fx_tampstr + "&url=" + window.location.href;

          signStr=sha1(signStr);
          that.$wxjs.config({
            debug: false,
            appId: "wx994320d0aac3cee8",
            timestamp: fx_tampstr,
            nonceStr: fx_noncestr,
            signature: signStr,
            jsApiList: ['chooseImage', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay']
          });
          let Id= that.$route.query.id;
          // 用于微信JS-SDK回调
          that.$wxjs.ready(function () {
            that.$wxjs.onMenuShareTimeline({
              title:that.ShopPingData.name,
              desc: that.ShopPingData.name, // 分享描述
              link:'http://www.mysoule.com/ProductDetails?id='+Id+"&type="+that.type,
              imgUrl: that.ShopPingData.image_url,
              success: function () {
                that.$toast("分享成功");
              },error: () => {
                that.$toast("已取消分享");
              }
            });
            that.$wxjs.onMenuShareAppMessage({
              desc: that.ShopPingData.name, // 分享描述
              title:that.ShopPingData.name,
              link:'http://www.mysoule.com/ProductDetails?id='+Id+"&type="+that.type,
              imgUrl: that.ShopPingData.image_url,
              success: function () {
                that.$toast("分享成功");
              },error: () => {
                that.$toast("已取消分享");
              }
            });
          });
        })
      },
    }

  }
</script>
<style lang="less" scoped>
  @import '../../assets/css/index.css';
	@import "../../../static/js/swiper.min.css";
	.van-popup--bottom.van-popup--round{
		border-radius: 6px 6px 0 0;
	}

  /deep/.van-swipe{height: 4.2rem;}
.attr{overflow: hidden;}
.active1{float: left;margin-right: 2%;background-color: #01bf47!important;border-radius:3rem;color: white; }
.attr ul li{float: left;margin-right: 2%;margin-bottom: 0.05rem; list-style-type: none;background-color:#f0f0f0 ;border-radius:3rem;}
</style>




